import React from 'react';
import { View, Text, Button } from 'react-native';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import BottomTabs from './BottomTabs';
import BottomTabsCustom from './BottomTabsCustom';
import BottomTabsAttribute from './BottomTabsAttribute';
import BottomVisIconAndLabel from './BottomVisIconAndLabel';
import MaterialTopTabs from './MaterialTopTabs';
import MaterialTopCustomTabs from './MaterialTopCustomTabs';
import MaterialTopTabsAttribute from './MaterialTopTabsAttribute';
import MaterialTopTabsVisLabel from './MaterialTopTabsVisLabel';
import { Tester, TestCase, TestSuite } from '@rnoh/testerino'; 

export const HomeScreen = ({ navigation }) => (
  <View style={styles.home}>
    <Tester>
      <TestSuite name="react-navigation-tabs">
        <Text style={styles.labelText}>React Navigation Tabs</Text>
        <View style={styles.buttonMargin}></View>
        <TestCase itShould={'createMaterialTopTabNavigator'}>
          <Button
            title="TopTabNavigator"
            onPress={() => navigation.navigate('Top')}
          />
        </TestCase>

        <View style={styles.buttonMargin}></View>
        <TestCase itShould={'createMaterialTopTabNavigator attribute'}>
          <Button
            title="TopTabNavigator attribute"
            onPress={() => navigation.navigate('MaterialTopTabsAttribute')}
          />
        </TestCase>

        <View style={styles.buttonMargin}></View>
        <TestCase itShould={'createMaterialTopTabNavigator visLabel'}>
          <Button
            title="TopTabNavigator visLabel"
            onPress={() => navigation.navigate('MaterialTopTabsVisLabel')}
          />
        </TestCase>

        <View style={styles.buttonMargin}></View>
        <TestCase itShould={'createMaterialTopTabNavigator custom'}>
          <Button
            title="TopTabNavigator custom"
            onPress={() => navigation.navigate('TopCus')}
          />
        </TestCase>

        <View style={styles.buttonMargin}></View>
        <TestCase itShould={'createBottomTabNavigator'}>
          <Button
            title="BottomTabNavigator"
            onPress={() => {
              navigation.navigate('Bottom');
            }}
          />
        </TestCase>

        <View style={styles.buttonMargin}></View>
        <TestCase itShould={'createBottomTabNavigator  attribute'}>
          <Button
            title="BottomTabNavigator attribute"
            onPress={() => navigation.navigate('BottomTabsAttribute')}
          />
        </TestCase>

        <View style={styles.buttonMargin}></View>
        <TestCase itShould={'createBottomTabNavigator  visIconAndLabel'}>
          <Button
            title="BottomTabNavigator visIconAndLabel"
            onPress={() => navigation.navigate('BottomVisIconAndLabel')}
          />
        </TestCase>

        <View style={styles.buttonMargin}></View>
        <TestCase itShould={'createBottomTabNavigator custom'}>
          <Button
            title="BottomTabNavigator custom"
            onPress={() => navigation.navigate('BottomCus')}
          />
        </TestCase>
      </TestSuite>
    </Tester>
  </View>
);

const AppNavigator = createSwitchNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    Bottom: {
      screen: BottomTabs,
    },
    BottomTabsAttribute: {
      screen: BottomTabsAttribute,
    },
    BottomVisIconAndLabel: {
      screen: BottomVisIconAndLabel,
    },
    BottomCus: {
      screen: BottomTabsCustom,
    },
    Top: {
      screen: MaterialTopTabs,
    },
    MaterialTopTabsAttribute: {
      screen: MaterialTopTabsAttribute,
    },
    MaterialTopTabsVisLabel: {
      screen: MaterialTopTabsVisLabel,
    },
    TopCus: {
      screen: MaterialTopCustomTabs,
    },
  },
  {
    initialRouteName: 'Home',
  },
);

const Navigator = createAppContainer(AppNavigator);

const TabsDemo = () => {
  return (
    <View style={styles.container}>
      <Navigator />
      <View style={styles.buttonContainer}></View>
    </View>
  );
};

const styles = {
  home: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonMargin: {
    height: 2,
  },
  labelText: {
    color: '#265abbff',
    fontSize: 20,
  },
  container: {
    flex: 1,
  },
  buttonContainer: {
    position: 'absolute' as const,
    bottom: 60,
    right: 20,
  },
};

export default TabsDemo;